const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const entryArr = [
    { name: 'option', path: './src/optionIndex.tsx' },
    { name: 'popup', path: './src/popupIndex.tsx' },
    { name: 'fixed', path: './src/fixedBtnIndex.tsx' },
];
function recursiveIssuer(m) {
    if (m.issuer) {
        return recursiveIssuer(m.issuer);
    } else if (m.name) {
        return m.name;
    } else {
        return false;
    }
}
module.exports = {
    entry: entryArr.map(item => ({ [item.name]: item.path })).reduce((t, v) => ({ ...t, ...v })),
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,

                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ]
            },
            {
                test: /\.less$/,
                exclude: /(node_modules)/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,

                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName: '[name]__[local]--[hash:base64:5]',
                            },
                        },
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            sourceMap: true,
                            lessOptions: {
                                javascriptEnabled: true,
                            }
                        }
                    }
                ]
            },
            {  // antd样式处理
                test: /\.css$|\.less$/,
                exclude: /src/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                        },
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            lessOptions: {
                                javascriptEnabled: true,
                            }
                        }
                    }
                ],
            },

            {
                test: /\.js$|\.tsx?$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename: 'popup.html',
            title:'小工具弹出快速操作页面',
            inject: true,
            chunks: ['popup']
        }),
        new HtmlWebpackPlugin({
            filename: 'option.html',
            title:'小工具配置页面',
            inject: true,
            chunks: ['option']
        }),
        new HtmlWebpackPlugin({
            filename: 'fixed.html',
            title:'小工具浮动注入页面',
            inject: true,
            chunks: ['fixed']
        }),
        new MiniCssExtractPlugin({

            filename: '[name].css',
        }),
    ],
    performance: {
        hints: "warning", // 枚举
        hints: "error", // 性能提示中抛出错误
        hints: false, // 关闭性能提示
        maxAssetSize: 200000, // 整数类型（以字节为单位）
        maxEntrypointSize: 400000, // 整数类型（以字节为单位）
        assetFilter: function (assetFilename) {
            // 提供资源文件名的断言函数
            return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
        }
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    // test: /\.js$/,
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "initial", //表示显示块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为all;
                    name: "vendor", //拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成；
                    enforce: true,
                },
                ...entryArr.filter(item => item.name !== 'fixed').map(item => ({
                    [`${item.name}Styles`]: {
                        name: item.name,
                        test: (m, c, entry = item.name) =>m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
                        chunks: 'all',
                        enforce: true,
                    }
                })).reduce((c, v) => ({ ...c, ...v })),
            },



        }
    },
};